<nz-card class="card-box" nzTitle="新增API">
  <div nz-row class="row">
    <div nz-col nzSpan="6" class="select-box">
      <h2>基础信息</h2>
    </div>
  </div>
  <form nz-form>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="email" class="label-box"
        >网关分组</nz-form-label
      >
      <nz-form-control [nzSpan]="22">
        <nz-form-control [nzSpan]="3">
          <nz-select ngModel="1" nzSize="large" nzPlaceHolder="请选择网关分组">
            <nz-option nzValue="1" nzLabel="cc(cc)"></nz-option>
            <nz-option nzValue="2" nzLabel="dwptest(dwptest)"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="email" class="label-box"
        >访问</nz-form-label
      >
      <nz-form-control [nzSpan]="22">
        <nz-form-control [nzSpan]="4">
          <nz-radio-group>
            <label nz-radio nzValue="A">允许</label>
            <label nz-radio nzValue="B">禁止</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="email" class="label-box"
        >路由类型</nz-form-label
      >
      <nz-form-control [nzSpan]="22">
        <nz-form-control [nzSpan]="4">
          <nz-radio-group ngModel="A">
            <label nz-radio nzValue="A">服务编排</label>
            <label nz-radio nzValue="B">服务发现</label>
            <label nz-radio nzValue="C">反向代理</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="email" class="label-box"
        >后端服务名</nz-form-label
      >
      <nz-form-control [nzSpan]="3">
        <nz-select ngModel="1" nzSize="large" nzPlaceHolder="请选择后端服务名">
          <nz-option nzValue="1" nzLabel="cc(cc)"></nz-option>
          <nz-option nzValue="2" nzLabel="dwptest(dwptest)"></nz-option>
        </nz-select>
      </nz-form-control>
      <nz-form-control [nzSpan]="15">
        <div>路由转发目标服务</div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="email" class="label-box"
        >后端API路径</nz-form-label
      >
      <nz-form-control [nzSpan]="15">
        <input nz-input placeholder="请输入后端API路径" />
        <div style="padding: 10px 0">
          路由转发目标路径，支持精确匹配和引用前端API路径的变量 (规则说明)
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="email" class="label-box"
        >前端服务名</nz-form-label
      >
      <nz-form-control [nzSpan]="3">
        <nz-select ngModel="1" nzSize="large" nzPlaceHolder="请选择前端服务名">
          <nz-option nzValue="1" nzLabel="cc(cc)"></nz-option>
          <nz-option nzValue="2" nzLabel="dwptest(dwptest)"></nz-option>
        </nz-select>
        <div style="padding: 10px 0; width: 400px">
          服务名为访问URL其中一级路径，建议与后端服务名一致
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired>调用方</nz-form-label>
      <nz-form-control>
        <label nz-checkbox>启用</label>
        <div style="padding: 10px 0">
          限制调用方访问，请求URL需在请求头中加应用授权 (示例) ，不启用不限制
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2">请求方法</nz-form-label>
      <nz-form-control [nzSpan]="3">
        <nz-select ngModel="1" nzSize="large" nzPlaceHolder="请选择请求方法">
          <nz-option nzValue="1" nzLabel="cc(cc)"></nz-option>
          <nz-option nzValue="2" nzLabel="dwptest(dwptest)"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2">超时时间</nz-form-label>
      <nz-form-control [nzSpan]="5">
        <nz-input-number
          [nzMin]="1"
          [nzMax]="10"
          [nzStep]="1"
          style="width: 255px"
        ></nz-input-number>
        <span>(毫秒)</span>
        <div style="padding: 10px 0">默认超时20s</div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <div ng->
        提示：网关访问地址格式为:
        "http://fizz网关ip:port/proxy/前端服务名/前端API路径"
      </div>
    </nz-form-item>
  </form>
  <div nz-row class="row">
    <div nz-col nzSpan="6" class="select-box">
      <h2>插件配置</h2>
    </div>
  </div>
  <div nz-row class="row">
    <div nz-col nzSpan="6" class="select-box">
      <button nz-button nzType="primary" (click)="open()">添加插件</button>
    </div>
  </div>
</nz-card>

<nz-drawer
  [nzClosable]="false"
  [nzVisible]="visible"
  nzPlacement="right"
  nzTitle="添加插件"
  (nzOnClose)="close()"
  [nzWidth]="800"
>
  <ng-container *nzDrawerContent>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </ng-container>
</nz-drawer>
